<template>
  <div class="Order" :data="OrderList">
    <!-- 导航 -->
    <van-nav-bar title="网易严选" left-arrow>
      <template #left>
        <van-icon name="wap-home-o" size="32px" color="#5b5c5d" />
      </template>
      <template #right>
        <van-icon name="search" size="32px" color="#5b5c5d" />
        <van-icon name="cart-o" size="32px" color="#5b5c5d" />
      </template>
    </van-nav-bar>
    <!-- 分割线 -->
    <div class="Img">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">
      <img src="@/assets/cart16.vs.webp" alt="">

    </div>

    <!-- 地址派送 -->
    <van-cell is-link class="address" size="large" v-for="add in address " :key="add.id">
      <div class="address1">
        <p class="uname">{{ add.consignee }}</p>
        <p class="uip">173****8339</p>
      </div>
      <div class="address2">
        <p class="default">{{ add.isDefault === '1' ? '默认' : '默认' }}</p>
        <p class="uinfo">{{ add.fullAddress }}</p>
      </div>
    </van-cell>
    <!-- 余额 -->
    <div class="oneRadio">
      <!-- 单选框 -->
      <van-radio class="radio" name="1" shape="square"></van-radio>
      <span class="text">余额 ：￥:0.00</span>
      <van-icon name="info-o" />
    </div>
    <!-- 商品合计 -->
    <van-cell-group>
      <van-cell title="商品合计" :value="totalMoney" class="title1" size="large" />
      <van-cell title="邮费" value="￥0.00" class="title2" size="large" />
      <van-cell title="活动优惠" value="内容" class="title3" size="large"><van-icon name="warning-o" /></van-cell>
      <van-cell title="优惠券" value="-￥0.00" class="title4" size="large" />
      <div class="oneRadio">
        <van-radio class="radio" name="1" shape="square"></van-radio>
        <van-cell is-link to="index" class="title4" size="large">
          <span class="text">我要开发票</span>
        </van-cell>
      </div>



    </van-cell-group>
    <!-- 包裹 -->
    <van-cell to="index" class="title5" size="large">
      <div class="index1">
        <div class="baoguo">包裹1 </div>
        <div class="zhifu">支付后，预计48小时内发货 </div>
      </div>
    </van-cell>

    <!-- 商品卡片 -->
    <div class="shopcard" v-for="ord in OrderList" :key="ord.skuId">
      <van-card class="cardee" :num="ord.skuNum" :price="ord.orderPrice" :desc="ord.sourceType" :title="ord.skuName"
        :thumb="ord.imgUrl" />
      <div class="extraInfo"><span>不享受学生特权</span><van-icon name="warning-o" /></div>
    </div>


    <!-- 协议 -->
    <div class="xieyi">
      <van-radio class="radio" name="1" shape="square"></van-radio>
      <div class="w-chkbox w-chkbox-1"><i class="m-checkbox  m-checkbox-1"></i>我已同意<a class="link"
          href="/help/new#/37/70">《网易严选服务协议》</a></div>
   
   
        </div>

    <!-- 提交订单 -->
    <div class="tijiaodindan">
      <div class="yifu">应付：￥ {{ totalMoney }}.00</div>
      <button class="footerdin" @click="toPaysss"><span>提交订单</span></button>
    </div>




  </div>
</template>
<script lang='ts' >
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Order'

})
</script>


<script setup lang='ts'>

import { useRoute, useRouter } from 'vue-router'
import emitter from '@/utils/eventBus';
//引入方法
import { reactive, ref, watch, nextTick, computed, toRaw, onMounted, toRef,getCurrentInstance } from 'vue'
//引入api接口
import { reqOrderInfo, jsonInfo } from '@/api/modules/Order'
import type { reqOrderInfoData, detailArrayListType, reqjsonInfoData } from '@/api/modules/Order'
import { reqSubmitOrder } from '@/api/modules/pay'
// 这样两个组件间就可以进行传值通信了
const router =useRouter()
let total = ref()
let row = ref()
let OrderList = ref<detailArrayListType[]>([])
let address = ref<reqjsonInfoData[]>([])
const tradeNo = ref('')
// 准备订单需要使用的参数


//获取交易页购买商品列表信息
async function OrderData() {

  const res = await reqOrderInfo()
  console.log(res.tradeNo)
  tradeNo.value = res.tradeNo
  OrderList.value = res.detailArrayList
  const res1 = await jsonInfo()
  // console.log(res1)
  address.value = res1.data

}
OrderData()
console.log(tradeNo.value)

// emitter.emit("toPay", res)
emitter.on("totalMoney", (totalMoney: any) => {
  total.value = totalMoney
  // console.log(total.value)
})

// 总价格

const totalMoney = computed(() => {
  let numMoney = 0
  OrderList.value.forEach((item) => {
    numMoney += item.skuNum * item.orderPrice
  })
  return numMoney
})



// toRaw(address.value.find(item => item.phoneNum))
//订单初始化
const toPaysss=async() =>{
  //订单类型
  const params = {
    tradeNo: tradeNo.value, // 订单编号
    fullAddress: toRaw(address.value.find(item => item.fullAddress))?.fullAddress, // 地址
    consignee: toRaw(address.value.find(item => item.consignee))?.consignee, // 收件人
    phoneNum: "18361261111", // 手机号
    paymentWay: 'ONLINE', // 支付方式
    orderComment: '', // 备注
    orderDetailList: toRaw(OrderList.value) // 商品数组
  }
  // console.log(params)

  const res = await reqSubmitOrder(params)
  let ddd =res +''
  router.push({path:'/item/cart/Pay',query:{id:ddd}})
}

</script>a





<style lang='less'  scoped>
html {
  // height: 100%;
  position: relative;
}

.Order {
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
}

.van-submit-bar {
  width: 375px !important;
  margin-top: -50px !important;

}

.tijiaodindan {
  display: flex;
  justify-content: space-between;
  width: 375px;
  height: 48px;
  align-items: center;
  line-height: 48px;
  white-space: nowrap;
  background-color: #FFFFFF;
  margin-top: 20px;
  // position: sticky;top: calc(100vh - 200px);
  position: fixed;

  bottom: 0px;

  .yifu {
    margin-left: 10px;
    margin-right: 160px;
    color: #DD1A21;
    font-size: 16px;
  }

  .footerdin {
    width: 113px;
    height: 48px;
    font-size: 14px;
    align-items: center;
    line-height: 48px;
    color: #FFFFFF;
    margin-left: -15px;
    background-color: #dd1a21;
    border: 2px solid#dd1a21;
    margin-bottom: 2px;
  }
}

.shopcard {
  background-color: #FFFFFF;
  height: 123px;
  margin-bottom: 20px;
}

.extraInfo {
  width: 345px;
  height: 14px;
  font-size: 14px;
  color: #7F7F7F;
  margin-left: 17px;
}

.xieyi {
  // margin-top:20px ;
  // position: relative;
  width: 370px;
  display: flex;
  align-items: center;
  line-height: 50px;
  height: 50px;
  font-size: 14px;
  box-sizing: border-box;
  color: #7F7F7F;
  ;

  .cardee {
    // position: absolute;
    margin: 20px 20px 0 0 !important;
    background-color: #FFFFFF !important;
    background-position: 0 -35px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    // border: .1px solid #cccccc;
  }

  .van-card cardee {
    background-color: #FFFFFF !important;
  }

}


.title6 {

  .img22 {
    margin-top: 20px;
    width: 80px;
    height: 80px;
  }
}



.title5 {

  width: 375px;
  height: 56px;
  margin-top: 10px;

  .index1 {
    display: flex;
    width: 360px;
    height: 46 px;
    line-height: 46px;
    text-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 2px;

    .baoguo {
      width: 60px;
      height: 60px;
      margin: 0;
      box-sizing: border-box;
      font-size: 16px;
      // line-height: 1.5;
      color: #333;
    }

    .zhifu {
      margin-left: -70px;
      width: 300px;
      color: #7F7F7F;
      // color: #ededed;
      height: 60px;

    }
  }

}

.Img {
  width: 375px;
  display: flex;

  img {
    width: 375px;
    height: 5px;
  }
}



.title1 .title2 .title3 {
  width: 360px;
  height: 52px;
  padding: 12.5px 15px 12.5px 0px;

  van-icon {
    margin-left: -100px !important;
  }
}

.title3 {
  van-icon {
    font-size: large;
    margin-left: -100px !important;
  }
}

.address {

  padding: 20px 43px 20px 15px;

  background-color: #FFFFFF;
  height: 75px;

  .address1 {
    width: 340px;
    height: 21px;
    display: flex;
    flex-direction: row;
    margin-top: -20px;

    .uname {
      height: 21px;
      width: 60px;
    }

    .uip {
      width: 274px;
      height: 14px;
    }
  }

  .address2 {

    width: 317px;
    height: 21px;
    display: flex;
    flex-direction: row;

    // margin-top:px;
    .default {
      width: 31px;
      margin-right: 30px;
      margin-bottom: -30px;
      padding: 0;
      height: 16px;
      display: block;
      line-height: 16px;
      text-align: center;
      color: #DD1A21;
      border-radius: 3px;
      border: 2px solid #DD1A21;
    }

    .uinfo {
      width: 274px;
    }

  }

}

.van-ico {
  margin: 19px 15px 0px 0px;
}

.radio {
  background-position: 0 -35px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: .1px solid #cccccc;
}

.text {
  margin-right: 140px;
}

.oneRadio {
  margin: 10px 0;
  background-color: #FFFFFF;
  color: #cccccc;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  height: 19px;
  padding: 20px 43px 20px 15px;
  align-items: center;
  line-height: 52px;
}

html {
  height: 100%
}

.Order {
  height: 100%;
  background-color: #f4f4f4;
  position: relative;
}


van-nav-bar {
  height: 44px;
  padding: 0 8px 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 44px;


}

.van-nav-bar-title-font-size {
  font-weight: 900;
}


.van-icon {
  size: 32px
}

.van-icon-cart-o {
  margin-left: 10px;
}
</style>